<template>
    <div class="text-box">
        <AnimateBorderCreep>
            <h2>博客使用如下框架构建</h2>
            <div class="gather">
                <a href="https://www.expressjs.com.cn/" target="_blank">
                    <img src="~/assets/images/express.png" />
                    <span>express</span></a
                >
                <a href="https://cn.vuejs.org/" target="_blank">
                    <img src="~/assets/images/vue.png" />
                    <span>vue</span>
                </a>
                <a href="https://nuxtjs.org/" target="_blank">
                    <img src="~/assets/images/nuxt.png" />
                    <span>nuxt</span>
                </a>
            </div>
        </AnimateBorderCreep>
    </div>
</template>

<script>
export default {
    name: "home-banner-two",
};
</script>

<style lang="less" scoped>
h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

.gather {
    display: flex;
    justify-content: space-between;

    a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 130px;
        height: 130px;
        align-items: center;

        img {
            max-width: 100px;
            max-height: 100px;
        }

        span {
            font-size: 18px;
            text-transform: capitalize;
            color: #fff;
        }

        &:hover {
            box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.5);
            -webkit-transition: -webkit-transform 0.5s;
            transition: -webkit-transform 0.5s;
            transition: transform 0.5s;
            transition: transform 0.5s, -webkit-transform 0.5s;
            -webkit-transform: scale(1.02);
            transform: scale(1.02);
        }
    }
}

@media (max-width: 768px) {
    h2 {
        display: none;
    }

    .gather {
        a {
            width: 80px;
            height: 80px;
            img {
                max-width: 60px;
                max-height: 60px;
            }

            span {
                font-size: 14px;
            }
        }
    }
}
</style>